@use 'design-system' as *;

.customerLogosOuter {
    text-align: center;
    overflow: hidden;
    position: relative;

    &::before,
    &::after {
        content: '';
        position: absolute;
        top: 0;
        height: 100%;
        width: var(--overflow-width, 10vw);
        pointer-events: none;
        z-index: 1;
    }

    &::before {
        left: 0;
        background-image: linear-gradient(90deg, var(--color-bg-primary), transparent);
    }

    &::after {
        right: 0;
        background-image: linear-gradient(90deg, transparent, var(--color-bg-primary));
    }
}

.customerLogos {
    --overflow-width: 10vw;

    position: relative;
    width: calc(100% + var(--overflow-width) * 2);
    height: 107px;
    margin-left: calc(var(--overflow-width) * -1);
    background-image: url(urlWithBaseUrl('/images/ag-grid-customer-logos.webp'));
    background-size: auto 107px;
    animation-name: customerMarquee;
    animation-duration: 1600s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    @media screen and (min-width: $breakpoint-grid-homepage-medium) {
        animation-duration: 400s;
    }

    @media screen and (max-width: $breakpoint-hero-small) {
        margin: 0 auto;
        width: 100%;
        height: 56px;
        background-size: auto 56px;
        animation-duration: 1100s;
    }
}

@keyframes customerMarquee {
    from {
        background-position-x: 0%;
    }

    to {
        background-position-x: 5000%;
    }
}
